/* eslint-disable prettier/prettier */

/**

 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React, { useCallback, useState } from 'react';
import { StyleSheet, View, Text, ScrollView, RefreshControl } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

const Article = ({ navigation }) => {
  const arr = [];
  for (let index = 0; index < 10; index++) {
    arr.push(index);
  }
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => {
      return setRefreshing(false);
    });
  }, []);

  return (
    <View>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        {arr.map((i) => {
          return (
            <View style={styles.body} key={i}>
              <View style={styles.card}>
                <View style={styles.cardTitle}>
                  <View style={styles.flex}>
                    <Text style={styles.color}>精品</Text>
                    <Text style={styles.pl4}>flex的那些事 第{i + 1}章</Text>
                  </View>
                  <Text style={styles.color}
                    onPress={() =>
                      navigation.navigate('ArticleInfo', {
                        title: `flex的那些事 第${i + 1}章`,
                      })
                    }
                  >详情</Text>
                </View>
                <View style={styles.cardBody}>
                  <Text>
                    {`      在flex容器中默认存在两条轴，水平主轴（main axis）和垂直的交叉轴（cross axis），这是默认的设置，你可以自主改变主轴和交叉轴。
      在容器中的每个单元块被称为flex item，每个项目占据的主轴空间为（main size），占据的交叉轴的空间称为（cross size）。
                    `}
                  </Text>
                </View>
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};

export default Article;

const styles = StyleSheet.create({
  navTitle: {
    fontWeight: 'bold',
    color: '#333333',
    fontSize: 20,
    paddingBottom: 5,
    paddingTop: 5,
    paddingLeft: 20,
    backgroundColor: '#ffffff',
  },
  subTitle: {
    fontWeight: 'bold',
    backgroundColor: '#ffffff',
    color: '#333333',
    fontSize: 16,
    paddingBottom: 5,
    paddingTop: 5,
    paddingLeft: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#eee',
  },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 5,
    padding: 4,
    marginTop: 2,
    marginBottom: 2,
  },
  text16: {
    fontSize: 16,
  },
  color: {
    fontSize: 12,
    color: '#4581DF',
  },
  flex: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  pl4: {
    paddingLeft: 10,
  },
  cardTitle: {
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
  },
  cardBody: {
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  tags: {
    width: 16,
    height: 16,
    backgroundColor: 'red',
    borderRadius: 8,
  },
  body: {
    flex: 1,
    padding: 10,
    backgroundColor: '#F6F7F9',
    position: 'relative',
    textAlign: 'center',
    justifyContent: 'center',
  },
  navBack: {
    height: 50,
    fontSize: 10,
    color: '#999999',
    backgroundColor: '#ffffff',

  },
  tabBar: {
    height: 50,
    fontSize: 10,
    color: '#999999',
    borderTopWidth: 1,
    borderTopColor: '#eeeeee',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});
